<div class="comp-resetPayPassword-dialog" id="alterPayPwd">
    <modal :show="true">
        <div class="modal-header">
            <a href="javascript:;" class="close" @click="hide()"><span>&times;</span></a>
            <span class="modal-title" >{{ $t('basic.securitySetting.resetAssetPass') }}</span>
        </div>
        <template v-if="resetBefore === true">
            <validator :rules="idRules" :parent="_self">
                <form class="m-form-dialog" :class="{'m-form-dialog--google':googleStatus === 'ON'}" name="idForm" action="javascript:;">
                    <div class="modal-body">
                        <div class="col-row">
                            <div class="col-label">
                                <label for="cardNo">{{ $t('basic.securitySetting.IDType') }}</label>
                            </div>
                            <div class="col-input col-input--block">
                                <v-select v-if="selectParams.options.length > 0"
                                          :options="selectParams.options"
                                          value="PASSPORT"
                                          v-on:selectVal="setSelectVal"></v-select>
                                <div class="ui-tip"></div>
                            </div>
                        </div>
                        <div class="col-row">
                            <div class="col-label">
                                <label for="cardNo">{{ $t('basic.securitySetting.IDNumber') }}</label>
                            </div>
                            <div class="col-input col-input--block">
                                <input type="text"
                                       class="fn-block"
                                       id="cardNo"
                                       name="cardNo"
                                       autocomplete="off"
                                       maxlength="100"
                                       :placeholder="$t('basic.securitySetting.IDTip')"
                                       v-model="idForm.cardNo">
                                <div class="ui-tip"></div>
                            </div>
                        </div>
                        <div class="col-row">
                            <div class="col-label">
                                <label for="identifyingCode">{{ $t('common.pVerification') }}</label>
                            </div>
                            <div class="col-input">
                                <verify-code :on-success="onSendSuccess"
                                             :on-fail="onSendFail"></verify-code>
                                <input type="text"
                                       class="input input--small"
                                       id="identifyingCode"
                                       name="identifyingCode"
                                       maxlength="6"
                                       autocomplete="off"
                                       :placeholder="$t('common.pVerification')"
                                       v-model="idForm.identifyingCode">
                                <div class="ui-tip"></div>
                            </div>
                        </div>
                        <div class="col-row" v-if="googleStatus === 'ON'">
                            <div class="col-label">
                                <label for="googleCode">{{ $t('common.pGoogleCode') }}</label>
                            </div>
                            <div class="col-input">
                                <input type="text"
                                       class="fn-block"
                                       autocomplete="off"
                                       id="googleCode"
                                       name="googleCode"
                                       maxlength="6"
                                       :placeholder="$t('common.pGoogleCode')"
                                       v-model="idForm.googleCode">
                                <div class="ui-tip"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="col-row">
                            <div class="col-label">
                                <label>&nbsp;</label>
                            </div>
                            <div class="col-text">
                                <div class="btn-group">
                                    <button type="submit"
                                            class="ui-btn binds"
                                            @click="resetPayPwdBefore()">{{ $t('common.next') }}</button>
                                    <a href="javascript:;" @click="hide" class="btn-cancel">{{ $t('common.cancel') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </validator>
        </template>
        <template v-if="resetBefore === false">
            <validator :rules="pwdRules" :parent="_self">
                <form class="m-form-dialog" name="pwdForm" action="javascript:;">
                    <div class="modal-body">
                        <div class="col-row">
                            <div class="col-label">
                                <label for="password">{{ $t('common.newPwd') }}</label>
                            </div>
                            <div class="col-input">
                                <input type="password"
                                       class="fn-block"
                                       autocomplete="off"
                                       id="password"
                                       name="password"
                                       :placeholder="$t('common.newPassRequireTip')"
                                       @focus="focusTips"
                                       @blur="blurTips"
                                       v-model="pwdForm.password">
                                <div class="ui-tip"></div>
                            </div>
                        </div>
                        <div class="col-row">
                            <div class="col-label">
                                <label for="confirmPwd">{{ $t('common.confirmPwd') }}</label>
                            </div>
                            <div class="col-input">
                                <input type="password"
                                       class="fn-block"
                                       autocomplete="off"
                                       id="confirmPwd"
                                       name="confirmPwd"
                                       :placeholder="$t('common.confirmPassRequireTip')"
                                       v-model="pwdForm.confirmPwd">
                                <div class="ui-tip"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="col-row">
                            <div class="col-label">
                                <label>&nbsp;</label>
                            </div>
                            <div class="col-text">
                                <div class="btn-group">
                                    <button type="submit"
                                            class="ui-btn binds"
                                            v-if="isRequesting === false && !resetBefore"
                                            @click="submit()">{{ $t('common.confirm') }}</button>
                                    <button type="submit"
                                            class="ui-btn binds"
                                            v-if="isRequesting === true && !resetBefore"
                                            disabled="disabled">{{ $t('common.waiting') }}...</button>
                                    <a href="javascript:;" @click="hide" class="btn-cancel">{{ $t('common.cancel') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </validator>
        </template>
    </modal>
</div>